<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
  <title>Document</title>
  <link href="../css/bootstrap.css" rel="stylesheet" type="text/css">
  <link href="../css/jquery-ui.css" rel="stylesheet" type="text/css">
  <link href="../css/webim_demo.css" rel="stylesheet" type="text/css">
  <link href="../css/bootstrap-table.css" rel="stylesheet" type="text/css">
  <link rel="stylesheet" type="text/css" href="../css/friends.css">
  <script src="../js/jquery-3.3.1.js"></script>
  <script src="../jss/lib/lodash.min.js" type="text/javascript"></script>
  <script src="../jss/lib/jquery/jquery-ui.js" type="text/javascript"></script>
  <script src="../jss/lib/lodash.min.js" type="text/javascript"></script>
  <script src="../jss/lib/bootstrap/bootstrap.js" type="text/javascript"></script>
  <script src="../jss/lib/bootstrap/bootstrap-table.js" type="text/javascript"></script>
  <script src="../jss/lib/bootstrap/bootstrap-collapse.js" type="text/javascript"></script>
  <script src="../jss/lib/xss.js" type="text/javascript"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/paho-mqtt/1.0.1/mqttws31.js" type="text/javascript"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/crypto-js/3.1.9-1/crypto-js.js" type="text/javascript"></script>
  <script src="../js/aliyun-webrtc-sdk-1.7.0.min.js"></script>
</head>
<style>
.submit{
 width: 40px;
 height: 25px;
 color: #fff;
 text-align: center;
 line-height: 25px;
 font-size: 14px;
 background: #54cae8;
 border-radius: 3px;
 display: none;
 margin-right: -2%;
    margin-left: 3%
}
.clearfix:after{
 content: '';
 display: block;
 clear: both;
}

.fl{
 float: left;
}
.fr{
 float: right;
}
.content2{
 background: #fff;
 border-radius: 30px;
 position: relative;
 padding: 10px 15px;
 margin-right: 5%;
 max-width: 180px;
 word-break: break-all;
}
.info_wrap{
 position: fixed;
 width: 100%;
 height: 80%;
 overflow: auto;
}
.msgbody img{
  width: 100px
}
.clearfix:after{
  content: '';
  display: block;
  clear: both;
}
.className1,.className2{
  float: right;
}
.friend1,.friend2{
  float: left;
}
.timesss{
  text-align: center;
}
.msgflow .onemsg .msgbody{
  max-width: 80%;
}
a{
  text-decoration: none;
  color: #000;
}
.emoji li{
  font-size: 25px;
}
</style>
<body style="background: #fff !important">
  <header>
     <a href="javascript:history.back(-1)" class="back"><img src="../img/back.png" height="18px"></a>
     <div class="center title">小静静</div>
 </header>

 <div class="flex report">
     <div class="flex cccc">
        <!-- <img src="../img/rep.png"> -->
        <p>最近联系人</p>
    </div>
    <div class="flex">
        <a href="friendslist.html">我的好友</a>
    </div>
</div>
<div class="aio" id="webim_demo" style="width: 100%;border: none;">
    <div class="titlebar" style="display: none;">
      <img id="p_my_face">
      <p id="t_my_name"></p>
      <ul id="t_my_menu">
        <li>菜单
          <ul>
            <li>最近联系人
              <ul>
                <li id="getRecentContactListMenu" onclick="getRecentContactList()">最近联系人</li>
              </ul>
            </li>
            <li>好友申请
              <ul>
                <li id="getPendencyMenu" onclick="getPendency(false)">查看好友申请</li>
              </ul>
            </li>
            <li>好友
              <ul>
                <li id="searchProfileByUserIdMenu" onclick="searchProfileByUserIdClick()">搜索用户</li>
                <li id="getAllFriendMenu" onclick="getMyFriend()">我的好友</li>
              </ul>
            </li>
            <li>黑名单
              <ul>
                <li id="getBlackListMenu" onclick="getBlackList()">我的黑名单</li>
              </ul>
            </li>
            <li>群组申请
              <ul>
                <li id="getApplyJoinGroupPendencyMenu" onclick="getApplyJoinGroupPendency()">查看加群申请</li>
              </ul>
            </li>
            <li>群组
              <ul>
                <li id="searchGroupByNameMenu" onclick="searchGroupByNameMenuClick()">搜索群组(按名称)</li>
                <li id="searchGroupMenu" onclick="searchGroupMenuClick()">搜索群组(按ID)</li>
                <li id="createGroupMenu" onclick="createGroupMenuClick()">创建群组</li>
                <li id="getMyGroupMenu" onclick="getMyGroup()">我的群组</li>
                <li id="sendCustomGroupNofifyMenu" onclick="showSendCustomGroupNotifyDialog()">发送群自定义通知</li>
              </ul>
            </li>
            <li>系统消息
              <ul>
                <li id="getMyGroupSystemsMenu" onclick="getMyGroupSystemMsgs()">我的群组系统消息</li>
                <li id="getMyFriendSystemsMenu" onclick="getMyFriendSystemMsgs()">我的好友系统消息</li>
                <li id="getMyProfileSystemsMenu" onclick="getMyProfileSystemMsgs()">我的资料系统消息</li>
              </ul>
            </li>
            <!--<li>图片-->
            <!--<ul>-->
            <!--<li id="uploadPicByBase64Menu" onclick="uploadPicByBase64()">上传图片(Base64)</li>-->
            <!--</ul>-->
            <!--</li>-->
            <li>设置
              <ul>
                <li id="setProfilePortraitMenu" onclick="setProfilePortraitClick()">个人资料</li>
                <li id="quitMenu" onclick="quitClick()">退出</li>
              </ul>
            </li>
          </ul>
        </li>
      </ul>
    </div>
    <div class="sesspart" style="position: fixed;top: 0;width: 100%;height:100%;overflow: auto;display: none;z-index: 9999;background: #fff">
      <div class="accordion" id="accordionContact">
        <div class="accordion-group">
          <div class="accordion-heading">
            <a class="accordion-toggle" data-parent="#accordionContact" data-toggle="collapse" href="#collapseRecentSession">最近联系人</a>
          </div>
          <div class="accordion-body collapse in" id="collapseRecentSession">
            <div class="sesslist"></div>
          </div>
        </div>
        <!-- <div class="accordion-group">
                <div class="accordion-heading">
                    <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordionContact" href="#collapseFriend">
                        我的好友
                    </a>
                </div>
                <div id="collapseFriend" class="accordion-body collapse">
                    <div class="sesslist">
                    </div>
                </div>
            </div>
            <div class="accordion-group">
                <div class="accordion-heading">
                    <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordionContact" href="#collapseGroup">
                        我的群组
                    </a>
                </div>
                <div id="collapseGroup" class="accordion-body collapse">
                    <div class="sesslist-group">
                    </div>
                </div>
            </div> -->
      </div>
    </div>
    <div class="chatpart" style="margin: 0;float: none;width: 100%;position: fixed;height: 86%;top:15%;overflow: auto;">
      <div class="msgflow" style="width: 100%;height: 88%;border: none"></div>
      <span id="msg_end" style="overflow:hidden"></span>
      <div class="editbar" style="display: none">
        <a class="chat02_title_btn ctb01" onclick="showEmotionDialog()" title="选择表情"></a>
        <a class="chat02_title_btn ctb03" href="#" onclick="selectPicClick()" title="选择图片"></a>
        <a class="chat02_title_btn ctb05" href="#" onclick="selectFileClick()" title="选择文件"></a>
        <a class="chat02_title_btn ctb04" href="#" onclick="showEditCustomMsgDialog()" title="发送自定义消息"></a>
        <div class="wl_faces_box" id="wl_faces_box">
          <div class="wl_faces_content">
            <div class="title">
              <ul>
                <li class="title_name">常用表情</li>
                <li class="wl_faces_close">
                  <span onclick='turnoffFaces_box()'>&nbsp;</span>
                </li>
              </ul>
            </div>
            <div class="wl_faces_main" id="wl_faces_main">
              <ul id="emotionUL"></ul>
            </div>
          </div>
          <div class="wlf_icon"></div>
        </div>
      </div>
      <!-- <textarea style="display: none;" class="msgedit" cols="82" id="send_msg_text" onkeydown="onTextareaKeyDown()" rows="5"></textarea> -->
     <!--  <div class="sendbar" style="display: none;">
        <button class="sendbtn" onclick="onSendMsg()" type="button">发送</button>
        <button class="closebtn" onclick="onClose()" type="button">关闭</button>
      </div> -->
    </div>
    <div class="bottom"></div>
  </div>
<div class="info_wrap msgflow" id='webim_demo' style="display: none;">
			<!-- <div class="">
				<p class="center data">04-09 <span>16:20</span></p>
				<div class="user flex">
					<img src="../img/logo.png" height="50px">
					<div class="content" style="max-width: 180px">老铁asdasdasdasd，周末爬山去吗</div>
				</div>
			</div>
			<div>
				<p class="center data">04-09 <span>16:20</span></p>
				<div class="user clearfix">
					<img class="fr" src="../img/logo.png" height="50px">
					<div class="content2 fr">老铁，asdasdadassd周末爬山去吗</div>
				</div>
			</div> -->
		</div>

		<footer>
			<div class="flex">
				<div class="import">
					<input type="text" class="msgedit" style="width: 100%;height: 35px" id="send_msg_text" onkeydown="onTextareaKeyDown()"  placeholder="请输入消息">
					<span class="box">
						<img src="../img/smile.png" class="smile">
						<img src="../img/smile-s.png">
					</span>
				</div>
				<div class="add" style="width: 25px;
    height: 25px;
    color: #999;
    border: 1.5px solid #999;
    text-align: center;
    line-height: 15px;
    border-radius: 50%;
    font-size: 20px;
    padding: 2px;
    margin-left: 5%;">+</div>
			<div class="submit sendbtn" onclick="onSendMsg()">发送</div>
			</div>
			<div class="emoji">
				<ul class="flex emoji-p">
					<li>😠</li>
					<li>😩</li>
					<li>😲</li>
					<li>😞</li>
					<li>😵</li>
					<li>😰</li>
					<li>😒</li>
					<li>😍</li>
					<li>😤</li>
					<li>😜</li>
					<li>😝</li>
					<li>😋</li>
					<li>😘</li>
					<li>😚</li>
					<li>😷</li>
					<li>😳</li>
					<li>😃</li>
					<li>😅</li>
					<li>😆</li>
					<li>😁</li>
					<li>😂</li>
				</div>
			</div>
			<div class="addcon flex">
				<div>
					<img src="../img/c1.png">
					<p>语音通话</p>
				</div>
				<div class="video_chatbtn">
					<img src="../img/c2.png">
					<p>视频聊天</p>
				</div>
				<div class="ctb03" onclick="selectPicClick()">
					<img src="../img/c3.png">
					<p>照片/视频</p>
				</div>
				<div>
					<img src="../img/c4.png">
					<p>发送位置</p>
				</div>
				<div>
					<a href="javascript:;" onclick="showEditCustomMsgDialog()">
						<img src="../img/c5.png">
						<p>发红包</p>
					</a>
				</div>
			</div>
		</footer>
  <div aria-hidden="true" style="opacity: 0" aria-labelledby="login_dialog_label" class="modal fade" data-backdrop="static" id="login_dialog"
    role="dialog" tabindex="-1">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <button aria-hidden="true" class="close" data-dismiss="modal" type="button">×</button>
          <h4 class="modal-title" id="login_dialog_label">登录</h4>
        </div>
        <div class="modal-body">
          <form class="form-horizontal" onkeydown="if(event.keyCode==13)return false;" role="form">
            <div class="form-group">
              <label class="col-sm-2 control-label" for="login_account">identifier</label>
              <div class="col-sm-10">
                <input class="form-control" id="login_account" maxlength="100" placeholder="请输入identifier" type="text" value="">
              </div>
            </div>
            <div class="form-group">
              <label class="col-sm-2 control-label" for="login_pwd">UserSig</label>
              <div class="col-sm-10">
                <input class="form-control" id="login_pwd" placeholder="请输入UserSig" type="text" value="">
              </div>
            </div>
          </form>
        </div>
        <div class="modal-footer">
          <button class="btn btn-default" data-dismiss="modal" type="button">关闭</button>
          <button class="btn btn-primary" id="click" onclick="independentModeLogin()" type="button">确定</button>
        </div>
      </div>
      <!-- /.modal-content -->
    </div>
    <!-- /.modal-dialog -->
  </div>
		<!-- <div class="userSig" style="opacity: 0;position: absolute;left: 0;top: 0"></div> -->
    <div aria-hidden="true" aria-labelledby="upload_pic_low_ie_dialog_label" class="modal fade" data-backdrop="static" id="upload_pic_low_ie_dialog"
    role="dialog" tabindex="-1">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <button aria-hidden="true" class="close" data-dismiss="modal" type="button">×</button>
          <h4 class="modal-title" id="upload_pic_low_ie_dialog_label">发送图片</h4>
        </div>
        <div class="modal-body">
          <form class="form-horizontal" enctype="multipart/form-data" id="updli_form" name="updli_form" onkeydown="if(event.keyCode==13)return false;"
            role="form">
            <div class="form-group">
              <label class="col-sm-2 control-label" for="File">选择</label>
              <div class="col-sm-10">
                <input id="updli_file" type="file">
              </div>
            </div>
          </form>
        </div>
        <div class="modal-footer">
          <button class="btn btn-default" data-dismiss="modal" type="button">关闭</button>
          <button class="btn btn-primary" onclick="uploadPicLowIE()" type="button">发送</button>
        </div>
      </div>
      <!-- /.modal-content -->
    </div>
    <!-- /.modal-dialog -->
  </div>
   <div aria-hidden="true" aria-labelledby="upload_pic_dialog_label" class="modal fade" data-backdrop="static" id="upload_pic_dialog"
    role="dialog" tabindex="-1">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <button aria-hidden="true" class="close" data-dismiss="modal" type="button">×</button>
          <h4 class="modal-title" id="upload_pic_dialog_label">发送图片</h4>
        </div>
        <div class="modal-body">
          <form class="form-horizontal" id="upd_form" name="upd_form" onkeydown="if(event.keyCode==13)return false;" role="form">
            <div class="form-group">
              <label class="col-sm-2 control-label" for="File">选择</label>
              <div class="col-sm-10">
                <input id="upd_pic" onchange="fileOnChange(this)" type="file">
                <!--<input type="button" value="停止" id="upd_abort" />-->
              </div>
            </div>
            <div class="form-group">
              <label class="col-sm-2 control-label" for="File">预览</label>
              <div class="col-sm-10">
                <div id="previewPicDiv"></div>
              </div>
            </div>
            <div class="form-group">
              <label class="col-sm-2 control-label" for="upd_progress">进度</label>
              <div class="col-sm-10">
                <progress id="upd_progress" max="100" value="0"></progress>
                <!--<input type="text" id="upd_progress" value="0" name="upd_progress" />-->
              </div>
            </div>
          </form>
        </div>
        <div class="modal-footer">
          <button class="btn btn-default" data-dismiss="modal" type="button">关闭</button>
          <button class="btn btn-primary" onclick="uploadPic()" type="button">发送</button>
        </div>
      </div>
      <!-- /.modal-content -->
    </div>
    <!-- /.modal-dialog -->
  </div>
    <div class='local-video' style="position:fixed;left: :0;">
    <video autoplay playsinline></video>
  </div>
  <div class="video-container" style="position:fixed;right:0;"></div>
	</body>
    </html>
    <script src="https://tls.qcloud.com/libs/api.min.js" type="text/javascript"></script>
  <!--用于获取文件MD5 js api(发送图片时用到)-->

  <script src="../jss/lib/md5/spark-md5.js" type="text/javascript"></script>
  <!--web im sdk-->

  <script src="../sdk/webim.js" type="text/javascript"></script>
  <!--<script type="text/javascript" src="sdk/webim.min.js"></script>-->

  <script src="../sdk/json2.js" type="text/javascript"></script>
  <!--web im sdk 登录 示例代码-->

  <script src="../jss/login/login.js" type="text/javascript"></script>
  <!--web im sdk 登出 示例代码-->

  <script src="../jss/logout/logout.js" type="text/javascript"></script>
  <!--web im 解析一条消息 示例代码-->

  <script src="../jss/common/show_one_msg.js" type="text/javascript"></script>
  <!--web im demo 基本逻辑-->

  <script src="../jss/base.js" type="text/javascript"></script>
  <!--web im sdk 资料管理 api 示例代码-->

  <script src="../jss/profile/profile_manager.js" type="text/javascript"></script>
  <!--web im sdk 好友管理 api 示例代码-->

  <script src="../jss/friend/friend_manager.js" type="text/javascript"></script>
  <!--web im sdk 好友申请管理 api 示例代码-->

  <script src="../jss/friend/friend_pendency_manager.js" type="text/javascript"></script>
  <!--web im sdk 好友黑名单管理 api 示例代码-->

  <script src="../jss/friend/friend_black_list_manager.js" type="text/javascript"></script>
  <!--web im sdk 最近联系人 api 示例代码-->

  <script src="../jss/recentcontact/recent_contact_list_manager.js" type="text/javascript"></script>
  <!--web im sdk 群组管理 api 示例代码-->

  <script src="../jss/group/group_manager.js" type="text/javascript"></script>
  <!--web im sdk 群成员�����理 api 示例代码-->

  <script src="../jss/group/group_member_manager.js" type="text/javascript"></script>
  <!--web im sdk 加群申请管理 api 示例代码-->

  <script src="../jss/group/group_pendency_manager.js" type="text/javascript"></script>
  <!--web im 切换聊天好友或群组 示例代码-->

  <script src="../jss/switch_chat_obj.js" type="text/javascript"></script>
  <!--web im sdk 获取c2c获取群组历史消息 示例代码-->

  <script src="../jss/msg/get_history_msg.js" type="text/javascript"></script>
  <!--web im sdk 发送普通消息(文本和表情) api 示例代码-->

  <script src="../jss/msg/send_common_msg.js" type="text/javascript"></script>
  <!--web im sdk 上传和发送图片消息 api 示例代码-->

  <script src="../jss/msg/upload_and_send_pic_msg.js" type="text/javascript"></script>
  <!--web im sdk 上传和发送文件消息 api 示例代码-->

  <script src="../jss/msg/upload_and_send_file_msg.js" type="text/javascript"></script>
  <!--web im sdk 切换播放语音消息 示例代码-->

  <script src="../jss/msg/switch_play_sound_msg.js" type="text/javascript"></script>
  <!--web im sdk 发送自定义消息 api 示例代码-->

  <script src="../jss/msg/send_custom_msg.js" type="text/javascript"></script>
  <!--web im sdk 发送群自定义通知 api 示例代码-->

  <script src="../jss/msg/send_custom_group_notify_msg.js" type="text/javascript"></script>
  <!--web im 监听新消息(c2c或群) 示例代码-->

  <script src="../jss/msg/receive_new_msg.js" type="text/javascript"></script>
  <!--web im 监听群系统通知消息 示例代码-->

  <script src="../jss/msg/receive_group_system_msg.js" type="text/javascript"></script>
  <!--web im 监听好友系统通知消息 示例代码-->

  <script src="../jss/msg/receive_friend_system_msg.js" type="text/javascript"></script>
  <!--web im 监听资料系统通知消息 示例代码-->

  <script src="../jss/msg/receive_profile_system_msg.js" type="text/javascript"></script>


  <script src="../jss/lib/BenzAMRRecorder.js" type="text/javascript"></script>
  <!-- web im 让h5支持播放amr录音文件 -->
  <script src="../js/friends.js"></script>

  <script type="text/javascript">
     function getUrlParam(name) {
            var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)"); //构造一个含有目标参数的正则表达式对象
            var r = window.location.search.substr(1).match(reg);  //匹配目标参数
            if (r != null) return unescape(r[2]); return null; //返回参数值
        }
        //接收URL中的参数id
     var id = getUrlParam('id');
     var uImg = localStorage.getItem('uImg');
     var uCount = localStorage.getItem('uCount');
        $('.msgedit').keyup(function () {
          if($(this).val()!=''){
             $('.add').hide();
             $('.submit').show()
         }else {
             $('.add').show();
             $('.submit').hide()
         }
     });
    // 将以下两个参数替换成您的配置
    var sdkAppID = '1400204816'; // 填写第一步获取到的 sdkappid
    //var accountType = ''; // 填写第二步设置账号体系集成获取到的 accountType , 已废弃
    // 登录帐号
    var identifier = uCount, // 填写第三步输入的 identifier，由您指定，可以在登录页面直接输入
        userSig=localStorage.getItem('userSig');; //填写第三步生成的userSig，可以在登录页面直接输入

    //帐号模式，0-表示独立模式，1-表示托管模式(托管模式已经停用，请使用独立模式集成帐号)
    var accountMode = 0;
    //当前用户身份
    var loginInfo = {
      'sdkAppID': sdkAppID, //用户所属应用id,必填
      // 'accountType': accountType, //用户所属应用帐号类型，必填 , 已废弃
      'identifier': identifier, //当前用户ID,必须是否字符串类型，必填
      'userSig': userSig,
      //当前用户身份凭证，必须是字符串类型，必填
      'identifierNick': null, //当前用户昵称，不用填写，登录接口会返回用户的昵称，如果没有设置，则返回用户的id
      'headurl': uImg //当前用户默认头像，选填，如果设置过头像，则可以通过拉取个人资料接口来得到头像信息
    };

    var AdminAcount = 'qwe101';
    var selType = webim.SESSION_TYPE.C2C; //当前聊天类型
    var selToID = id; //当前选中聊天id（当聊天类型为私聊时，该值为好友帐号，否则为群号）
    var selSess = null; //当前聊天会话对象
    var recentSessMap = {}; //保存最近会话列表
    var reqRecentSessCount = 50; //每次请求的最近会话条数，业务可以自定义

    var isPeerRead = 1; //是否需要支持APP端已读回执的功能,默认为0。是：1，否：0。

    //默认好友头像
    var friendHeadUrl = '../img/friend.jpg'; //仅demo使用，用于没有设置过头像的好友
    //默认群头像
    var groupHeadUrl = '../img/group.jpg'; //仅demo使用，用于没有设置过群头像的情况

    //存放c2c或者群信息（c2c用户：c2c用户id，昵称，头像；群：群id，群名称，群头像）
    var infoMap = {}; //初始化时，可以先拉取我的好友和我的群组信息


    var maxNameLen = 12; //我的好友或群组列表中名称显示最大长度，仅demo用得到
    var reqMsgCount = 15; //每次请求的历史消息(c2c获取群)条数，仅demo用得到

    var pageSize = 15; //表格的每页条数，bootstrap table 分页时用到
    var totalCount = 200; //每次接口请求的条数，bootstrap table 分页时用到

    var emotionFlag = false; //是否打开过表情选择框

    var curPlayAudio = null; //当前正在播放的audio对象

    var getPrePageC2CHistroyMsgInfoMap = {}; //保留下一次拉取好友历史消息的信息
    var getPrePageGroupHistroyMsgInfoMap = {}; //保留下一次拉取群历史消息的信息

    var defaultSelGroupId = null; //登录默认选中的群id，选填，仅demo用得到

    //监听（多终端同步）群系统消息方法，方法都定义在receive_group_system_msg.js文件中
    //注意每个数字代表的含义，比如，
    //1表示监听申请加群消息，2表示监听申请加群被同意消息，3表示监听申请加群被拒绝消息
    var onGroupSystemNotifys = {
      "1": onApplyJoinGroupRequestNotify, //申请加群请求（只有管理员会收到）
      "2": onApplyJoinGroupAcceptNotify, //申请加群被同意（只有申请人能够收到）
      "3": onApplyJoinGroupRefuseNotify, //申请加群被拒绝（只有申请人能够收到）
      "4": onKickedGroupNotify, //被管理员踢出群(只有被踢者接收到)
      "5": onDestoryGroupNotify, //群被解散(全员接收)
      "6": onCreateGroupNotify, //创建群(创建者接收)
      "7": onInvitedJoinGroupNotify, //邀请加群(被邀请者接收)
      "8": onQuitGroupNotify, //主动退群(主动退出者接收)
      "9": onSetedGroupAdminNotify, //设置管理员(被设置者接收)
      "10": onCanceledGroupAdminNotify, //取消管理员(被取消者接收)
      "11": onRevokeGroupNotify, //群已被回收(全员接收)
      "15": onReadedSyncGroupNotify, //群消息已读同步通知
      "255": onCustomGroupNotify, //用户自定义通知(默认全员接收)
      "12": onInvitedJoinGroupNotifyRequest //邀请加群(被邀请者接收,接收者需要同意)
    };

    //监听好友系统通知函数对象，方法都定义在receive_friend_system_msg.js文件中
    var onFriendSystemNotifys = {
      "1": onFriendAddNotify, //好友表增加
      "2": onFriendDeleteNotify, //好友表删除
      "3": onPendencyAddNotify, //未决增加
      "4": onPendencyDeleteNotify, //未决删除
      "5": onBlackListAddNotify, //黑名单增加
      "6": onBlackListDeleteNotify //黑名单删除
    };

    var onC2cEventNotifys = {
      "92": onMsgReadedNotify, //消息已读通知,
      "96": onMultipleDeviceKickedOut
    };

    //监听资料系统通知函数对象，方法都定义在receive_profile_system_msg.js文件中
    var onProfileSystemNotifys = {
      "1": onProfileModifyNotify //资料修改
    };

    //监听连接状态回调变化事件
    var onConnNotify = function (resp) {
      var info;
      switch (resp.ErrorCode) {
        case webim.CONNECTION_STATUS.ON:
          webim.Log.warn('建立连接成功: ' + resp.ErrorInfo);
          break;
        case webim.CONNECTION_STATUS.OFF:
          info = '连接已断开，无法收到新消息，请检查下你的网络是否正常: ' + resp.ErrorInfo;
          // alert(info);
          webim.Log.warn(info);
          break;
        case webim.CONNECTION_STATUS.RECONNECT:
          info = '连接状态恢复正常: ' + resp.ErrorInfo;
          // alert(info);
          webim.Log.warn(info);
          break;
        default:
          webim.Log.error('未知连接状态: =' + resp.ErrorInfo);
          break;
      }
    };

    //IE9(含)以下浏览器用到的jsonp回调函数
    function jsonpCallback(rspData) {
      webim.setJsonpLastRspData(rspData);
    }

    //监听事件
    var listeners = {
      "onConnNotify": onConnNotify //监听连接状态回调变化事件,必填
        ,
      "jsonpCallback": jsonpCallback //IE9(含)以下浏览器用到的jsonp回调函数，
        ,
      "onMsgNotify": onMsgNotify //监听新消息(私聊，普通群(非直播聊天室)消息，全员推送消息)事件，必填
        ,
      "onBigGroupMsgNotify": onBigGroupMsgNotify //监听新消息(直播聊天室)事件，直播场景下必填
        ,
      "onGroupSystemNotifys": onGroupSystemNotifys //监听（多终端同步）群系统消息事件，如果不需要监听，可不填
        ,
      "onGroupInfoChangeNotify": onGroupInfoChangeNotify //监听群资料变化事件，选填
        ,
      "onFriendSystemNotifys": onFriendSystemNotifys //监听好友系统通知事件，选填
        ,
      "onProfileSystemNotifys": onProfileSystemNotifys //监听资料系统（自己或好友）通知事件，选填
        ,
      "onKickedEventCall": onKickedEventCall //被其他登录实例踢下线
        ,
      "onC2cEventNotifys": onC2cEventNotifys //监听C2C系统消息通道
        ,
      "onAppliedDownloadUrl": onAppliedDownloadUrl //申请文件/音频下载地址的回调
        ,
      "onLongPullingNotify": function (data) {
        console.debug('onLongPullingNotify', data)
      }
    };

    var isAccessFormalEnv = true; //是否访问正式环境

    var isLogOn = false; //是否开启sdk在控制台打印日志

    //初始化时，其他对象，选填
    var options = {
      'isAccessFormalEnv': isAccessFormalEnv, //是否访问正式环境，默认访问正式，选填
      'isLogOn': isLogOn //是否开启控制台打印日志,默认开启，选填
    }



    var msgflow = document.getElementsByClassName("msgflow")[0];
    var bindScrollHistoryEvent = {
      init: function () {
        msgflow.onscroll = function () {
          if (msgflow.scrollTop == 0) {
            msgflow.scrollTop = 10;
            if (selType == webim.SESSION_TYPE.C2C) {
              getPrePageC2CHistoryMsgs();
              console.log(1);
            } else {
              getPrePageGroupHistoryMsgs();
            }

          }
        }
      },
      reset: function () {
        msgflow.onscroll = null;
      }
    };
  function selhistory(){
      var lastMsgTime=0;
      var msgKey='';
      var optionss = {
        'Peer_Account': selToID, //好友帐号
        'MaxCnt': reqMsgCount, //拉取消息条数
        'LastMsgTime': lastMsgTime, //最近的消息时间，即从这个时间点向前拉取历史消息
        'MsgKey': msgKey
    };
    selSess = null;
    webim.MsgStore.delSessByTypeId(selType, selToID);


    webim.getC2CHistoryMsgs(
        optionss,
        function(resp) {
            var complete = resp.Complete; //是否还有历史消息可以拉取，1-表示没有，0-表示有

            if (resp.MsgList.length == 0) {
                webim.Log.warn("没有历史消息了:data=" + JSON.stringify(options));
                return;
            }
            getPrePageC2CHistroyMsgInfoMap[selToID] = { //保留服务器返回的最近消息时间和消息Key,用于下次向前拉取历史消息
                'LastMsgTime': resp.LastMsgTime,
                'MsgKey': resp.MsgKey
            };
            //清空聊天界面
            document.getElementsByClassName("msgflow")[0].innerHTML = "";
            if (cbOk)
                cbOk(resp.MsgList);
        },
        function(errr) {
           console.log(errr);
        },
    );
  }
  
    /*getPrePageC2CHistoryMsgs();*/
    // webimLogin();
    // $('#select_app_dialog').modal('show');
    $('.submit').click(function(){
      $(this).hide();
      $('.add').show();
    })
    $('#login_dialog').modal('show');
    $(function(){
      
     $('#login_account').val(uCount);
     $('#login_pwd').val(userSig);
     setTimeout(function () {
          $('#click').click();
          
      },500)
    });
      
      /*$('#login_pwd').val(userSig);*/
    

    console.log(selToID);
     setTimeout(function(){
      var ccc='#sessDiv'+id;
      $(ccc).click(function(){
        console.log($(this).attr('id'));
      })
    },600);
    $(document).on('click','.sesslist div',function(){
      $('.sesspart').hide()
    });
    $('.cccc').click(function(){
      $('.sesspart').show()
    });
    

    $('.add_fiends').click(function(){
      $.post('/meiyou/addFriend',{toUser:id},function(data){
        alert(data.msg);
      })
    });

$.each($('#emotionUL li'),function(){
  var index=$(this).index();
  $(this).find('img').attr('id',index);
})
        var hvuex = {
        publisherList: []
      }
        var channelId;
        var token;
        var nonce;
        var timestamp;
        var appid='txz2zhcn';
        instanceId = 'post-cn-45915r0fw1h';//实例 ID，购买后从控制台获取
        host = 'post-cn-45915r0fw1h.mqtt.aliyuncs.com';// 设置当前用户的接入点域名，接入点获取方法请参考接入准备章节文档，先在控制台创建实例
        port = 80;//WebSocket 协议服务端口，如果是走 HTTPS，设置443端口
        topic = 'rtc/video_chat';//需要操作的 Topic,第一级父级 topic 需要在控制台申请
        useTLS = false;//是否走加密 HTTPS，如果走 HTTPS，设置为 true
        accessKey = 'LTAIvKcmvWQ80zRM';//账号的 AccessKey，在阿里云控制台查看
        secretKey = '09bBSKCP1j6Aer2fjRo3w5uDBMEmO0';//账号的的 SecretKey，在阿里云控制台查看
        cleansession = true;
        groupId = 'GID_video_group';//MQTT GroupID,创建实例后从 MQTT 控制台创建
        clientId = groupId + '@@@'+uCount;//GroupId@@@DeviceId，由控制台创建的 Group ID 和自己指定的 Device ID 组合构成
        
        var mqtt;
        var reconnectTimeout = 2000;
        var username = 'Signature|' + accessKey + '|' + instanceId;//username和 Password 签名模式下的设置方法，参考文档 https://help.aliyun.com/document_detail/48271.html?spm=a2c4g.11186623.6.553.217831c3BSFry7
        var password = CryptoJS.HmacSHA1(clientId, secretKey).toString(CryptoJS.enc.Base64);
        function MQTTconnect() {
            mqtt = new Paho.MQTT.Client(
                host,//MQTT 域名
                port,//WebSocket 端口，如果使用 HTTPS 加密则配置为443,否则配置80
                clientId//客户端 ClientId
            );
            var options = {
                timeout: 3,
                onSuccess: onConnect,
                mqttVersion: 4,
                onFailure: function (message) {
                    setTimeout(MQTTconnect, reconnectTimeout);
                }
            };
            mqtt.onConnectionLost = onConnectionLost;
            mqtt.onMessageArrived = onMessageArrived;
            if (username != null) {
                options.userName = username;
                options.password = password;
                options.useSSL = useTLS;//如果使用 HTTPS 加密则配置为 true
            }
            mqtt.connect(options);
        }
        function onConnect() {
            
        }
        function onConnectionLost(response) {
            setTimeout(MQTTconnect, reconnectTimeout);
        };
        function onMessageArrived(message) {
            var topic = message.destinationName;
            var payload = message.payloadString;
            console.log("recv msg : " + topic + "   " + payload);
             var imgs=JSON.parse(payload);
             channelId=imgs.channelId;
             token=imgs.token;
             timestamp=imgs.timestamp;
         
             nonce=imgs.nonce;
             AliRtcEngine.isSupport().then(re => {
              console.log(re)
              init();
            }).catch(err => {
              alert(err.message);
              console.log(err.message)
            });
        };

        MQTTconnect();
     

 /* var getQueryString = function (name) {
    var vars = [], hash;
    var hashes = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&');
    for (var i = 0; i < hashes.length; i++) {
      hash = hashes[i].split('=');
      vars.push(hash[0]);
      vars[hash[0]] = hash[1];
    }
    return vars[name];
  }*/

/*  userName = Math.random().toString(36).replace(/[^a-z]+/g, '').substr(0, 5);
  $('.local-display-name').text("User: " + userName + "        Channel Id: " + channelId);
  $('.channel-input input').val(channelId);*/

  //AliWebRTC code

  var aliWebrtc;
  function init() {
    aliWebrtc = new AliRtcEngine("");
    // remote流发布事件
    aliWebrtc.on('onPublisher', (publisher) => {
      hvuex.publisherList.push(publisher);
      receivePublish(publisher);
    });
    aliwebrtc.muteLocalMic(true);
    // remote流结束发布事件
    aliWebrtc.on('onUnPublisher', (publisher) => {
      var publisherInfo = hvuex.publisherList.filter(item => {
        return item.publisherId === publisher.publisherId;
      });
      publisherInfo.length > 0 ? removePublish(publisherInfo[0]) : '';
    });
    //错误信息
    aliWebrtc.on('onError', (error) => {
      var msg = error && error.message ? error.message : error;
      alert(msg);
    });

    //订阅remote流成功后，显示remote流
    aliWebrtc.on('onMediaStream', (subscriber, stream) => {
      if (subscriber.publishId != subscriber.subscribeId) {
        var publisher = hvuex.publisherList.filter(item => {
          return item.publisherId === subscriber.publishId;
        });
        publisher.length > 0 ? publisher[0].subscribeId = subscriber.subscribeId : '';
        var video = getDisplayRemoteVideo(subscriber.publishId, subscriber.subscribeId, subscriber.displayName);
        aliWebrtc.setDisplayRemoteVideo(subscriber, video, stream)
      }
    });

    aliWebrtc.on('OnConnecting', (data) => {
      console.log(data.displayName + "正在建立连接中...");
    });
    aliWebrtc.on('OnConnected', (data) => {
      console.log(data.displayName + "成功建立连接");
    });

    aliWebrtc.on('onLeave', (data) => {
      var publisher = hvuex.publisherList.filter(item => {
        return item.userId === data.userId;
      });
      publisher.length > 0 ? removePublish(publisher[0]) : '';
    })


    //1.预览
    var localVideo = $('.local-video video');
    aliWebrtc.startPreview(localVideo[0]).then((obj) => {
      // var localVideo = $('.local-video video');
      // localVideo[0].srcObject = obj.stream;
      //2. 获取频道鉴权令牌参数
    
        //3. 加入房间
        aliWebrtc.joinChannel({
        	   "appid": appid,
            "userid": uCount,
            "channel":channelId,
            "nonce":nonce,
            "timestamp": timestamp,
            "token": token,
        },uCount).then(() => {
          console.log('加入房间成功');
          // 4. 发布本地流
          aliWebrtc.publish().then((res) => {
            console.log('发布流成功');
          }, (error) => {
            alert(error.message);
          });
        }).catch((error) => {
          alert(error.message);
        })
      
    }).catch((error) => {
      alert(error.message);
    });
  }


  var receivePublish = (publisher) => {
    var publisherId = publisher.publisherId,
      displayName = publisher.displayName;
    //5.订阅remote流
    aliWebrtc.subscribe(publisherId).then((subscribeCallId) => {
      console.log('订阅成功')
    }, (error) => {
      alert(error.message);
    });
  };

  var removePublish = (publisher) => {
    var id = publisher.subscribeId + '_' + publisher.publisherId;
    var videoWrapper = $('#' + id);
    videoWrapper ? videoWrapper.remove() : '';
  }

  var getDisplayRemoteVideo = function (publisherId, subscribeCallId, displayName) {
    var id = subscribeCallId + '_' + publisherId;
    var videoWrapper = $('#' + id);
    if (videoWrapper.length == 0) {
      videoWrapper = $('<div class="remote-subscriber" id=' + id + '> <video autoplay playsinline></video><div class="display-name"></div></div>');
      $('.video-container').append(videoWrapper);
    }
    videoWrapper.find('.display-name').text(displayName);
    return videoWrapper.find('video')[0];
  }

  //获取频道鉴权令牌参数这个方法需要客户重新实现，调用RTC服务的Open API获取
/*  var getRTCAuthInfo = () => {
    return new Promise(function (resolve, reject) {
      $.ajax({
        url: "https://alirtc.ossrs.net/app/v1/login?room=" + channelId + "&user=" + userName + "&passwd=1234", //"https://alirtc.ossrs.net/app/v1/login?room="+channelId + "&user="+ userName + "&passwd=1234",
        type: 'POST',
        contentType: 'application/json; charset=utf-8',
        dataType: 'json',
        success: (data) => {
          data.data.channel = channelId;
          resolve(data.data);
        },
        failed: (error) => {
          reject(error);
        }
      });
    });
  }*/

  $('.channel-input button').click(() => {
    var value = $('.channel-input input').val();
    if (!value) {
      return;
    }
    aliWebrtc.leaveChannel();
    location.href = './index.html?channel=' + value;
  });



  window.onbeforeunload = function (e) {
    aliWebrtc.leaveChannel();
    aliWebrtc.dispose();
  };


  $('.video_chatbtn').click(function(){
    //MQTTconnect();
	// Connection succeeded; subscribe to our topic
      mqtt.subscribe(topic, {qos: 0});
      var json = '{"fromUser":"'+uCount+'","toUser":"'+id+'"}'
      message = new Paho.MQTT.Message(json);//set body
      message.destinationName = topic;// set topic
      //发送 P2P 消息，topic 设置方式参考https://help.aliyun.com/document_detail/96176.html?spm=a2c4g.11186623.6.586.694f7cb4oookL7
      /*message = new Paho.MQTT.Message("Hello mqtt P2P Msg!!");//set body
      message.destinationName = topic + "/p2p/" + groupId + '@@@server_manager';// set topic*/
      mqtt.send(message);
  });

// $('.modal-dialog').attr('style','display:none;background:none;opacity:0;');
$('.emoji li').click(function(){
  $('.msgedit').val($(this).html());
  $('.emoji').removeClass('c-emoji');
  $('.submit').show();
  $('.add').hide();
  $('.box').children('img').css('display','none')
  $('.box').children('img').eq(0).css('display','block')
  flag=true;
});

</script>
   